import { animated, useSprings, useSpringValue ,useTrails,useSpringRef} from '@react-spring/web'
import { useEffect } from 'react';
import './index.css'
export default function Demo() {
  // const styles =useSpring({
  //   from:{
  //     height:0,
  //     width:0,
  //   },
  //   to:{
  //     height:300,
  //     width:300,
  //   },
  //   config:{
  //     // duration:2000,
  //     mass:20,
  //     friction:5,
  //     tension:80,
  //   }
  // })
  // const width =useSpringValue(0,{
  //   config:{
  //     // duration:2000,
  //     mass:20,
  //     friction:5,
  //     tension:80,
  //   }
  // })

  //  useEffect(()=>{
  //   styles.start({
  //     width:300,
  //   })
  //  },[])


  // const [styles,api] =useSpring (()=>{
  //   return {
  //     from:{
  //       height:100,
  //       width:100,
  //     },
  //     config:{
  //       // duration:2000,
  //       mass:20,
  //       friction:5,
  //       tension:80,
  //     }
  //   }
  // })

  // const handClick =()=>{
  //   api.start({
  //     height:300,
  //     width:300,
  //   })
  // }
  // const [styles,api] =useSprings (3,()=>({
  //   from:{
  //     width:0,
  //   },
  //   to:{
  //     width:300,
  //   },
  //   config:{
  //     duration:2000,
  //   }
  // }),[])
  const api1 = useSpringRef()
  const [styles] = useTrails(3, () => ({
    ref
    from: {
      width: 0,
    },
    to: {
      width: 300,
    },
    config: {
      duration: 2000,
    }
  }))
  return (
    styles.map((style) => {
      return <animated.div className="box" style={{ ...style }} key={style.width}></animated.div>
    })
  )
}